<template>
	<view class="absolute l-0 b-0 fixed main" :class="blur ? 'blur' : ''">
		<view class="iphone-safe-height body relative" :style="{backgroundColor: blur ? '' : backgroundColor}">
			<!-- <view class="main"></view> -->
			<view class="fulled-height flex flex-start">
				<template v-for="(item, index) in list">
					<view class="tabbar-item flex-center" :style="{width: `${itemWidth}`}"
						v-if="midButton.iconPath && ((list.length == 4 && index == 2) || (list.length == 2 && index == 1))"
						@click="midButtonTaped">
						<image :style="{width:`${midButton.iconWidth}rpx`, height:`${midButton.height}rpx`}"
							:src="midButton.iconPath" :previmage="false"></image>
					</view>
					<view class="tabbar-item flex-center" :style="{width: `${itemWidth}`}"
						@click="toPage(item.pagePath)">
						<text
							:style="{fontSize: `${fontSize}`, color: `${currentPage == item.pagePath ? selectedColor : color}`}"
							:class="currentPage == item.pagePath ? 'text-weight-b' : ''">{{ item.text }}</text>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "c-tabbar",
		props: {
			color: {
				type: String,
				default: 'rgba(102, 102, 102, 1)'
			},
			selectedColor: {
				type: String,
				default: 'rgba(17, 17, 17, 1)'
			},
			backgroundColor: {
				type: String,
				default: 'rgba(255, 255, 255, 1)'
			},
			fontSize: {
				type: String,
				default: '16px'
			},
			// 是否启用毛玻璃效果
			blur: {
				type: Boolean,
				default: false
			},
			midButton: {
				type: Object,
				default: () => {
					return {
						iconPath: '/static/tabbar/camera@3x.png',
						iconWidth: 60,
						height: 52
					}
				}
			},
			list: {
				Array,
				default: () => {
					return [{
							text: '首页',
							pagePath: 'pages/tabbar/home'
						},
						{
							text: '关注',
							pagePath: 'pages/tabbar/follow'
						},
						{
							text: '消息',
							pagePath: 'pages/tabbar/message'
						},
						{
							text: '我的',
							pagePath: 'pages/tabbar/mine'
						}
					];
				}
			}
		},
		data() {
			return {
				safeHeight: 0,
				itemWidth: '33.3%',
				currentPage: '' // 当前页面路由
			};
		},
		created() {
			// 获取当前页面路由
			var pages = getCurrentPages();
			var page = (pages[pages.length - 1]).route;
			if (page) {
				this.currentPage = page;
			}
			const sysinfo = uni.getSystemInfoSync();
			console.log(sysinfo);
			console.log(page);
			// 计算tabbar-item宽度
			if (this.list.length >= 2) {
				let len = this.list.length;
				if (this.midButton.iconPath) {
					if (this.list.length == 2 || this.list.length == 4) {
						len++;
					}
				}
				this.itemWidth = `${(1 / len) * 100}%`;
				console.log(this.itemWidth);
			}
		},
		methods: {
			midButtonTaped() {
				console.log('点击了midButton');
				this.$emit('onMidButtonTaped');
			},
			toPage(path) {
				if (!path) {
					console.error('页面路径设置错误');
				} else {
					if (path !== this.currentPage) {
						uni.switchTab({
							url: `/${path}`,
							fail(e) {
								console.log(e);
							}
						})
					}
				}
			}
		}
	}
</script>

<style scoped>
	.main {
		overflow: hidden;
	}
	.body {
		height: 100rpx;
		width: 750rpx;
		/* background: rgba(70, 63, 63, 0.1); */
	}
	
	.blur {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(40px);
	}

	.tabbar-item {
		width: 33.3%;
	}

	.iphone-safe-height {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
